<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.png" type="image/x-icon">
    <title>图片列表</title>
    {% load static %}
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'icon/bootstrap-icons.min.css' %}">
    <link rel="stylesheet" href="{% static 'site/list_tmp/main.css' %}">
</head>

<body>
    <div class="container">
        {% include 'common/nav.html' %}
        <div class="row justify-content-center">


            <!-- 主内容区 -->
            <div class="col">
                <div class="page-header d-flex justify-content-between align-items-center">
                    <h2 class="h4 mb-0 flex-grow-1">图片列表</h2>
                </div>
            </div>

            {% if images %}
            <div class="image-grid">
                {% for image in images %}
                <div class="image-card">
                    <a href="{% url 'image_detail' image.id %}">
                        <img src="{{ image.image_file.url }}" alt="{{ image.title }}" class="image-thumbnail">
                    </a>
                    <div class="image-body">
                        <h3 class="image-title">{{ image.title|default:"无标题" }}</h3>

                        {% if image.tags.all %}
                        <div class="image-tags">
                            {% for tag in image.tags.all %}
                            <span class="tag-badge">
                                <span class="tag-name">{{ tag.tag.name }}:</span>
                                <span class="tag-value">
                                    {% if tag.tag.tag_type == 'BOOL' %}
                                    {{ tag.bool_value|yesno:"是,否" }}
                                    {% elif tag.tag.tag_type == 'DATE' %}
                                    {{ tag.date_value|date:"Y-m-d" }}
                                    {% else %}
                                    {{ tag.get_value|truncatechars:12 }}
                                    {% endif %}
                                </span>
                            </span>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="image-tags text-muted">无标签</div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="no-images">
                <i class="bi bi-image" style="font-size: 2.5rem; opacity: 0.5;"></i>
                <p class="mt-3">暂无公开图片</p>
                <a href="{% url 'upload' %}" class="btn btn-outline-primary mt-2">上传第一张图片</a>
            </div>
            {% endif %}

            <!-- 后端分页导航 -->
            {% if paginator.num_pages > 1 %}
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    {% if images.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1" aria-label="First">
                            <span aria-hidden="true">&laquo;&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ images.previous_page_number }}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% endif %}

                    {% for num in paginator.page_range %}
                    {% if images.number == num %}
                    <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
                    {% elif num > images.number|add:'-3' and num < images.number|add:'3' %} <li class="page-item"><a
                            class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                        {% endif %}
                        {% endfor %}

                        {% if images.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ images.next_page_number }}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ paginator.num_pages }}" aria-label="Last">
                                <span aria-hidden="true">&raquo;&raquo;</span>
                            </a>
                        </li>
                        {% endif %}
                </ul>
            </nav>
            {% endif %}
        </div>
    </div>
    </div>
</body>

</html>